<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>组件通信__自定义事件</title>
</head>
<body>

<div id="app">
    <p>总数：{{ total }}</p>
    <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *
     * 当子组件需要向父组件传递数据时，就需要使用到自定义事件。v-on指令除了监听DOM事件外，还可以用于组件之间的自定义事件。
     *
     * JS观察者模式提供了两个方法dispatchEvent和addEventListener。Vue中也提供了类似的方法。
     * 子组件使用$emit()来触发事件，父组件使用$on()来监听子组件的事件。
     * 当然父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。
     *
     **/


     Vue.component('my-component',{
         template:"<div><button type='button' @click='handleIncrease'>+1</button><button type='button' @click='handleReduce'>-1</button></div>",
         data:function () {
             return {
                 counter:0
             }
         },
         methods:{
             handleIncrease:function () {
                 this.counter++;
                 this.$emit('increase',this.counter);  //子组件通过$emit()方法将counter传递给父组件，父组件使用v-on:increase和v-on:reduce
             },
             handleReduce:function () {
                 this.counter--;
                 this.$emit('reduce',this.counter); //$emit()方法的第一个参数是自定义事件的名称，如increase和reduce后面的参数都是要传递的数据，可以不写或者填写多个。
             }
         }
     });

    var app = new Vue({
        el:"#app",
        data:{
            total:0
        },
        methods:{
            handleGetTotal:function (total) {
                this.total = total;
            }
        }
    })






</script>
</body>
</html>
